* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: it;
  src: url('./Spyced-1.ttf');
}

p {
  font-family: it;
}

%center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

%left-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #eee;
}

a {
  text-decoration: none;
  color: #000;
}

.nav-footer {
  @extend %center;
  @extend %left-bottom;
  height: 36px;

  a.active {
    color: red;
  }
}

.tab-sel {
  @extend %center;
  padding: 0 10px;
  height: 36px;
  background: skyblue;

  .tab-item {
    flex: 1;
    @extend %center;

    b.active {
      color: red;
    }
  }

  .icon {}

  &.active {
    height: 60px;
    flex-direction: column;
    align-content: flex-end;

    .icon {
      order: -1;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .tab-item {
      @extend %center;
      width: 100%;

    }
  }
}

.list-item {
  display: flex;

  dd {
    padding: 10px;
    flex: 1;
    overflow: hidden;

    p {
      // white-space: nowrap;
      overflow: hidden;
      // width: 100%;
      // text-overflow: ellipsis;
      // display:-webkit-box;
      // -webkit-box-orient:vertical; 
      // -webkit-line-clamp:3;
      // overflow: hidden;      
      text-overflow: ellipsis;
      display: -webkit-box;
      /* 将对象作为弹性伸缩盒子模型显示 */
      -webkit-line-clamp: 2;
      /* 控制最多显示几行 */
      -webkit-box-orient: vertical;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }
  }

  border-bottom: 1px solid #ccc;
}